<template>
	<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" />

	<view class="base-message">

		<uv-cell-group title="">
			<uv-cell title="编号：" :value="detailData.number"></uv-cell>
			<uv-cell title="工单名称：" :value="detailData.title"></uv-cell>
			<uv-cell title="状态：">
				<!-- 自定义右侧值 -->
				<template v-slot:value>
					<text class="cus-value">{{stateMapping[detailData.state] || ''}}</text>
				</template>
			</uv-cell>
			<uv-cell title="超时状态：" :value="detailData.outState">
				<!-- 自定义右侧值 -->
				<template v-slot:value>
					<text class="cus-value">{{outStateMapping[detailData.outState] || ''}}</text>
				</template>
			</uv-cell>
			<uv-cell title="超时时长：" :value="detailData.timeoutHour"></uv-cell>
			<uv-cell title="发起人：" :value="detailData.creater?.userName || ''"></uv-cell>
			<uv-cell title="发起时间：" :value="detailData.originatingTime"></uv-cell>
			<uv-cell title="处理人：" :value="detailData.processor?.userName"></uv-cell>
			<uv-cell title="计划处理时间：" :value="detailData.planStartTime"></uv-cell>
			<uv-cell title="计划用时(h)：" :value="detailData.planTime"></uv-cell>
			<uv-cell title="实际处理时间：" :value="detailData.realityStartTime"></uv-cell>
			<uv-cell title="实际用时(h)：" :value="detailData.realityTime"></uv-cell>
			<uv-cell title="验证人：" :value="detailData.validator?.userName"></uv-cell>
			<uv-cell title="偏差字段：" :value="detailData.deviation"></uv-cell>
			<uv-cell title="电站：" :value="detailData.powerstationName"></uv-cell>
			<uv-cell title="设备类型：" :value="detailData.deviceTypeName"></uv-cell>
			<uv-cell title="设备：" :value="detailData.deviceName"></uv-cell>
			<uv-cell title="告警信息：" :value="detailData.alarmName"></uv-cell>
			<uv-cell title="工单处理报告：">

				<template v-slot:value>
					<text style="color: #006ed2;text-decoration: underline;" @click="fillOrderReport">填写工单报告</text>
				</template>

			</uv-cell>
			<uv-cell title="优先级：" :value="detailData.priority">
				<!-- 自定义右侧值 -->
				<template v-slot:value>
					<text class="cus-value">{{priorityMapping[detailData.priority] || ''}}</text>
				</template>
			</uv-cell>
			<!-- annexs -->
			<uv-cell title="图片描述："></uv-cell>
		</uv-cell-group>
		<!-- 处理按钮 -->
		<uv-button v-if="isShowBtn" type="primary" :text="operateBtnText"
			@click="operateBtn(detailData.state)"></uv-button>
		<!-- 拒绝按钮 -->
		<uv-button type="default" text="拒绝"></uv-button>
	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		getCurrentInstance
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reqChargeDetail
	} from "@/api/model/chargingStation"

	import {
		reqOrderDetail,
		reqOperateOrder
	} from "@/api/operate"
	import {
		navigateTo
	} from "@/utils/router"
	const title = ref('工单详情')
	const detailData = ref({

	})
	const isShowBtn = ref(true) //是否展示操作按钮
	const stateMapping = {
		0: '待接受',
		1: '待处理',
		2: '执行中',
		3: '待验证',
		5: '已完成',
		6: '拒绝接受',
		8: '已终止',
	};
	const outStateMapping = {
		0: '未超时',
		1: '已超时'
	}

	const priorityMapping = {
		0: '较低',
		1: '普通',
		2: '紧急',
		3: '非常紧急',
	}
	const getDetail = async (id) => {
		let {
			data
		} = await reqOrderDetail(id)
		console.log("详情数据", data)
		detailData.value = data.data
	}
	//操作按钮
	const operateBtn = async (state) => {
		// if(!state) return;
		console.log("处理工单参数", detailData.value)
		console.log("处理按钮", state)


		let queryObj = backQuery(state); //回写参数

		if (state == undefined || state == null) {
			// 新增工单

			return;
		}

		// 更新工单状态
		switch (state) {
			case 0:
				queryObj.operation = 1; // 接受
				queryObj.state = 1; // 待处理
				break;
			case 1:
				queryObj.state = 2; // 执行中
				break;
			case 2:
				queryObj.state = 3; // 处理完成
				break;
			case 3:
				queryObj.operation = 1; // 接受
				queryObj.state = 5; // 验证完成
				break;
			default:
				break;
		}

		try {
			console.log("工单处理报告提交参数", queryObj);
			await reqOperateOrder(queryObj)
			uni.navigateBack({
				delta: 1
			});

		} catch (error) {
			this.$message.error("操作失败，请稍后重试！");
		}

	}

	//返回提交参数
	const backQuery = (val) => {
		if (val == undefined) { //新增时
			let fileId = [];
			// if (this.fileListCopy && this.fileListCopy.length > 0) {
			// 	this.fileListCopy.map((item) => {
			// 		fileId.push(item.fileId);
			// 	});
			// 	this.ruleForm = Object.assign(this.ruleForm, {
			// 		fileIds: fileId,
			// 	});
			// }

			// this.ruleForm.planStartTime = this.YYMMDDToStandardTime(
			// 	this.ruleForm.planStartTime
			// );
			// this.ruleForm.planEndTime = this.YYMMDDToStandardTime(
			// 	this.ruleForm.planEndTime
			// );

			// return this.ruleForm;
		} else {
			return {
				operation: val,

				processorId: detailData.value.processor.userId, //处理人ID
				// state: 1,
				status: detailData.value.status,
				validatorId: detailData.value.validator.userId, //验证人ID
				workorderId: detailData.value.id, //工单ID
			};
		}
	}
	//填写工单报告
	const fillOrderReport = () => {
		uni.navigateTo({
			url: `/pages/components/pages/yunwei/handleDetail?id=${detailData.value.id}`,
		})
	}
	//操作按钮文字
	const operateBtnText = computed(() => {
		const mapping = {
			0: "接受",
			1: "开始处理",
			2: "处理完成",
			3: "同意",
			5: "验证完成",
		}
		return mapping[detailData.value.state] || "确定"

	})

	onLoad((option) => {
		const instance = getCurrentInstance().proxy;
		const eventChannel = instance.getOpenerEventChannel()
		getDetail(option.id)
		// eventChannel.on('getAlarmId', (data) => {
		// 	getDetail(option.alarmId)
		// })

	})
</script>

<style lang="scss" scoped>
	.base-message {
		::v-deep {
			.uv-cell-group {
				.cus-value {
					font-size: 14px;
					font-weight: 400;
					color: #a1a1a2;
				}
			}
		}
	}
</style>